import rem100 from "./rem";
import "./App.css";
import React, { useEffect, useState } from "react";
import axios from "axios";
import dayjs from "dayjs";

const App = () => {
  const [data, setData] = useState([]);
  const getData = () => {
    axios
      .get("https://systemjs.1688.com/krump/schema/1352.json")
      .then((res) => {
        console.log(1111111, res.data.list);
        setData(res.data.list);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  const HandleRestTime = (prop) => {
    const { time } = prop;
    let times = time;
    const [formatTime, setTime] = useState({ h: "00", m: "00", s: "00" });
    useEffect(() => {
      if (time) {
        handleTime();
      }
    }, []);
    const handleTime = () => {
      const interval = setInterval(() => {
        times = times - 1;
        const h = parseInt(`${(times / 60 / 60) % 24}`);
        const m = parseInt(`${(times / 60) % 60}`);
        const s = parseInt(`${times % 60}`);
        setTime({
          h: h < 10 ? `0${h}` : `${h}`,
          m: m < 10 ? `0${m}` : `${m}`,
          s: s < 10 ? `0${s}` : `${s}`,
        });
      }, 1000);
      if (times <= 0) {
        clearInterval(interval);
        return;
      }
    };

    return (
      <div
        style={{
          marginLeft: "10px",
          display: "flex",
          gap: "5px",
          color: "#FFEDBE",
          textAlign: "center",
        }}
      >
        <div
          style={{
            width: "2.125rem",
            height: "2rem",
            color: "#FF4000",
            borderRadius: "3px",
            background: "linear-gradient(#FFE9B0,#FFF1CE)",
          }}
        >
          {formatTime.h}
        </div>
        :
        <div
          style={{
            width: "2.125rem",
            borderRadius: "3px",
            height: "2rem",
            color: "#FF4000",
            background: "linear-gradient(#FFE9B0,#FFF1CE)",
          }}
        >
          {formatTime.m}
        </div>
        :
        <div
          style={{
            width: "2.125rem",
            height: "2rem",
            borderRadius: "3px",
            color: "#FF4000",
            background: "linear-gradient(#FFE9B0,#FFF1CE)",
          }}
        >
          {formatTime.s}
        </div>
      </div>
    );
  };
  return (
    <div
      style={{
        width: "44.625rem",
        fontSize: "16px",
        margin: "0 auto",
      }}
    >
      <div
        style={{
          margin: "1.9375rem 0 1.375rem 1.4375rem",
          color: "#000000",
          fontSize: "2rem",
        }}
      >
        1688进货红包
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "1.375rem",
          backgroundRepeat: "no-repeat",
        }}
      >
        {data.length
          ? data.map((item) => (
              <div
                key={item.id}
                style={{
                  position: "relative",
                  width: "38.125rem",
                  height: "10.125rem",

                  margin: "0 11px 0 13px",
                  background: `url(https://gw.alicdn.com/imgextra/i1/O1CN01SzXzZl1U46EOknhoB_!!6000000002463-2-tps-1380-362.png)`,
                  backgroundSize: "contain",
                  backgroundRepeat: "no-repeat",
                }}
              >
                <div
                  style={{
                    fontSize: "4.25rem",
                    color: "#A45927",
                    position: "absolute",
                    top: "2rem",
                    left: "1.625rem",
                    textAlign: "end",
                  }}
                >
                  {item.money}
                  {String(item.money).length <= 3 ? (
                    <span
                      style={{
                        marginLeft: ".25rem",
                        fontSize: "1.75rem",
                        lineHeight: "1.75rem",
                      }}
                    >
                      元
                    </span>
                  ) : null}
                </div>
                <div
                  style={{
                    position: "absolute",
                    left: "11rem",
                    margin: "1.5625rem 0 1.1875rem 0",
                  }}
                >
                  <div style={{ color: "#FFE9B0", fontSize: "2.25rem" }}>
                    {item.title}
                  </div>
                  <div style={{ color: "#FFE9B0", fontSize: "1.375rem" }}>
                    {item.description}
                  </div>

                  <div
                    style={{
                      marginTop: ".5rem",
                      color: "#FFE9B0",
                      fontSize: "1.375rem",
                    }}
                  >
                    {item.restTime ? (
                      <div style={{ display: "flex", fontSize: "1.25rem" }}>
                        距结束 <HandleRestTime time={item.restTime} />
                      </div>
                    ) : (
                      <div style={{ display: "flex", fontSize: "1.25rem" }}>
                        有效期：
                        {dayjs(item.time[0]).format("MM.DD hh:mm")}-
                        {dayjs(item.time[1]).format("MM.DD hh:mm")}
                      </div>
                    )}
                  </div>
                </div>
                <div
                  style={{
                    position: "absolute",
                    width: "9.125rem",
                    height: "4rem",
                    borderRadius: "25px",
                    background: "#FFE9B0 ",
                    top: "3rem",
                    right: "1rem",
                    textAlign: "center",
                    lineHeight: "4rem",
                    color: "#A45927",
                    fontSize: "2.25rem",
                  }}
                >
                  {item.status}
                </div>
              </div>
            ))
          : "暂无数据"}
      </div>
    </div>
  );
};

// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }
// function Count(props) {
//   return <div>{props.name}</div>;
// }
// class Count extends React.Component {
//   constructor(props) {
//     super(props);
//     console.log("Child constructor");
//     this.state = {
//       count: "haha",
//     };
//   }
//   render() {
//     console.log("Childrender");
//     return <h1>Child {this.props.count}</h1>;
//   }
//   componentWillMount() {
//     console.log("ChildcomponentWillMount");
//   }
//   componentDidMount() {
//     console.log("ChildcomponentDidMount");
//   }
//   componentWillReceiveProps(new_props) {
//     console.log("ChildcomponentWillReceiveProps", new_props, this.props);
//   }
//   shouldComponentUpdate() {
//     return false;
//   }
//   componentWillUpdate(props, state) {
//     console.log("ChildcomponentWillUpdate", props, state, this.props);
//   }
//   componentDidUpdate() {
//     console.log("ChildcomponentDidUpdate");
//   }
// }
// class App extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       count: 0,
//     };
//     console.log("constructor");
//   }
//   componentWillMount() {
//     this.setState({
//       count: this.state.count + 1,
//     });
//     console.log("componentWillMount");
//   }
//   componentDidMount() {
//     console.log("componentDidMount");
//     // this.setState({
//     //   count: this.state.count + 1,
//     // });
//   }

//   handleClick = (id, e) => {
//     this.setState({
//       count: this.state.count + 1,
//     });
//   };
//   render() {
//     console.log("render");
//     return (
//       <h1 onClick={(e) => this.handleClick(1, e)}>
//         {this.state.count}
//         <Count count={this.state.count} />
//       </h1>
//     );
//   }
// }

// state渲染组件
// class App extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       isShow: false,
//     };
//   }
//   handleClick() {
//     this.setState({
//       isShow: !this.state.isShow,
//     });
//   }
//   render() {
//     let isShow;
//     if (this.state.isShow) {
//       isShow = <Show onClick={() => this.handleClick()} />;
//     } else {
//       isShow = <Hide onClick={() => this.handleClick()} />;
//     }
//     return isShow;
//   }
// }

// class Show extends React.Component {
//   constructor(props) {
//     super(props);
//   }
//   render() {
//     return <h1 onClick={this.props.onClick}>show</h1>;
//   }
// }
// class Hide extends React.Component {
//   constructor(props) {
//     super(props);
//   }
//   render() {
//     return <h1 onClick={this.props.onClick}>Hide</h1>;
//   }
// }
// class App extends React.Component {
//   constructor(props) {
//     super(props);
//   }
//   render() {
//     return (
//       <div>
//         <div>{this.props.left}</div>
//         {/* <div>{this.props.children}</div> */}
//         <div>{this.props.right}</div>
//       </div>
//     );
//   }
// }

// todolist
// class App extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       filterText: "",
//       isSelected: false,
//     };
//   }
//   handfilter = (filterText) => {
//     this.setState({
//       filterText,
//     });
//   };
//   handleSelect = (isSelected) => {
//     this.setState({
//       isSelected,
//     });
//   };
//   render() {
//     console.log("render");
//     const { data } = this.props;
//     const { filterText, isSelected } = this.state;
//     return (
//       <div>
//         <Title
//           filterText={filterText}
//           isSelected={isSelected}
//           handfilter={this.handfilter}
//           handleSelect={this.handleSelect}
//         />
//         <Table data={data} filterText={filterText} isSelected={isSelected} />
//       </div>
//     );
//   }
// }
// class Title extends React.Component {
//   constructor(props) {
//     super(props);
//   }
//   handfilter = (e) => {
//     this.props.handfilter(e.target.value);
//   };
//   handleSelect = (e) => {
//     this.props.handleSelect(e.target.checked);
//   };
//   render() {
//     return (
//       <div>
//         <input
//           type="text"
//           value={this.props.filterText}
//           onChange={(e) => this.handf ilter(e)}
//         ></input>
//         <br />
//         <input
//           type="checkbox"
//           checked={this.props.isSelected}
//           onChange={(e) => this.handleSelect(e)}
//         ></input>
//         <span>是否只显示有库存的</span>
//       </div>
//     );
//   }
// }
// class Table extends React.Component {
//   constructor(props) {
//     super(props);
//   }
//   render() {
//     let { data, filterText, isSelected } = this.props;
//     data = data.filter((item) => item.name.indexOf(filterText) != -1);
//     const titleArr = Array.of(...new Set(data.map((item) => item.category)));
//     let list;
//     titleArr.forEach((item) => {
//       !isSelected
//         ? (list = data.filter((dataItem) => dataItem.category == item))
//         : (list = data.filter(
//             (dataItem) => dataItem.category == item && dataItem.stocked
//           ));
//     });

//     return (
//       <div>
//         {titleArr.map((item) => (
//           <div key={item}>
//             <TableTitle title={item} />
//             <TableList list={list} />
//           </div>
//         ))}
//       </div>
//     );
//   }
// }
// function TableTitle(props) {
//   return <h1>{props.title}</h1>;
// }
// function TableList(props) {
//   return (
//     <div>
//       {props.list.map((item) => (
//         <div key={item.name}>
//           <span style={{ color: item.stocked ? "blue" : "red" }}>
//             {item.name}
//           </span>
//           {item.price}
//         </div>
//       ))}
//     </div>
//   );
// }

// context
// const Context = React.createContext("dark");
// const Context1 = React.createContext("context1");

// class App extends React.Component {
//   constructor() {
//     super();
//     this.state = {
//       count: 0,
//     };
//   }
//   addCount = () => {
//     this.setState({
//       count: this.state.count + 1,
//     });
//   };
//   render() {
//     return (
//       <Context.Provider value={this.state.count}>
//         <Context1.Provider>
//           <button onClick={this.addCount}>Add</button>
//           <ToolBar />
//         </Context1.Provider>
//       </Context.Provider>
//     );
//   }
// }

// class ToolBar extends React.Component {
//   shouldComponentUpdate() {
//     return false;
//   }
//   render() {
//     console.log("render");
//     return <ThemeButton />;
//   }
// }

// class ThemeButton extends React.Component {
//   static contextType = Context;

//   render() {
//     return <div>{this.context}</div>;
//   }
// }
// 接受context也可以这样写
// ThemeButton.contextType = Context;
export default App;
